<%@ page language="java" pageEncoding="UTF-8" %>

<script type="text/javascript">
    $.get(basePath + '/lunboAll/', function (resp) {
        if (resp.success) {
            if (resp.data != null) {
                var list = resp.data;
                var divLunboHtml = [];
                var olIndexHtml = [];
                for (var i = 0; i < list.length; i++) {
                    var info = list[i];
                    divLunboHtml.push('<div class="carousel-item');
                    olIndexHtml.push(' <li data-target="#carouselExampleIndicators"');
                    if (i == 0) {
                        divLunboHtml.push(' active"');
                        olIndexHtml.push(' class="active"');
                    }
                    divLunboHtml.push('"><img class="d-block w-100" src="${contextPath}/' + info.image + '" />');
                    olIndexHtml.push(' data-slide-to="' + i + '"></i>');

                    divLunboHtml.push('</div>');
                }
                $("#divLunbo").empty().html(divLunboHtml.join(''));
                $("#olIndex").empty().html(olIndexHtml.join(''));
            }
        } else {
            alert(resp.message);
        }
    })
</script>

<section>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators" id="olIndex">
        </ol>
        <div class="carousel-inner" style="height:400px" id="divLunbo">
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>